<template>
  <header class="answerQuestion" tabindex="-1" ref="questionDom">
    <!-- 问答题 -->
    <div class="question-add-body-content-question">
      <div class="question-add-body-content-question-div">
        <span class="question" :style="isQuestionShowStyle">
          <span>问题</span>
          <span class="questionNum">{{ num }}</span>
        </span>
        <i class="el-icon-remove-outline" @click="deleteQuestion"></i>
      </div>
      <el-form
        :model="questionData"
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="auto"
      >
        <el-form-item
          prop="mainTitle"
          :rules="[
            {
              required: true,
              message: '请输入问题标题',
              trigger: 'blur',
            },
            {
              min: 3,
              max: 100,
              message: '长度在 3 到 100 个字符',
              trigger: 'blur',
            },
          ]"
        >
          <span
            style="color: red; margin-left: 8.7px"
            class="isRequireAnswer"
            :style="isAnswer"
          >
            *
          </span>
          <el-input
            v-model="questionData.mainTitle"
            placeholder="请输入问题标题"
            class="title"
            :style="inputStyle"
          ></el-input>
        </el-form-item>
        <el-input
          type="textarea"
          v-model="questionData.content"
          :rows="7"
          class="content"
          resize="none"
        ></el-input>
      </el-form>
    </div>
  </header>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'AnswerQuestion',
  data() {
    return {
      //问题的序号：
      num: 1,

      isAnswer: '', //是否为必答
      inputStyle: '',

      //! 传给父组件的问卷数据
      questionData: {
        id: '',
        mainTitle: '',
        content: '',
        queType: 3, //问卷类型
        requiredQue: 0, //是否必填
        displayNumber: 1, //是否显示序号
      },
    }
  },
  props: {
    //设置组件的默认属性
    count: {
      type: Number, //设置这个属性的默认属性类型
    },
    isQuestionShowStyle: {
      type: String,
    },

    //问卷题目标题
    mainTitle: {
      type: String,
    },

    //问卷 id
    infoId: {
      type: String,
    },

    //是否为必达题
    isRequired: {
      type: String,
    },
  },

  beforeMount() {
    //计算问题的序号：
    this.num = this.count
    this.questionData.id = this.infoId

    if (this.isRequired === 'display:none') {
      this.questionData.requiredQue = 0
      this.isAnswer = 'display:none'
      this.inputStyle = 'margin-left: 20px'
    } else {
      this.questionData.requiredQue = 1
      this.isAnswer = 'display:inline'
    }
  },
  mounted() {},
  methods: {
    //删除本身
    deleteQuestion() {
      this.$confirm('请确认是否删除本问卷？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // console.log(this.$refs.questionDom.className)
          let classStr = this.$refs.questionDom.className
          let classNum = parseInt(classStr.substr(classStr.length - 1, 1))
          // console.log(classNum, 's')
          //把大于本身的序号改变
          this.$emit('delete-question', {
            ismount: false,
            needEditNumber: classNum,
          })

          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style scoped>
.answerQuestion {
  margin-right: 60px;
  margin-bottom: 40px;
  width: 440px;
  height: 297px;
  border: 2px solid lightgrey;
  border-radius: 5px;
  outline: none;
}

/*
问答题
 */
.question-add-body-content-question {
  width: 434px;
  height: 100%;
  overflow: auto;
  /* width: 440px;
  height: 297px;
  border: 2px solid lightgrey;
  border-radius: 5px; */
  /* display: inline-block; */
  /* line-height: 280px; */
  /* text-align: center; */
  /* margin: autos; */
}

.question-add-body-content-question-div {
  width: 405px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  margin: auto;
  /* border: 1px solid; */
  font-size: 18.5px;
  position: relative;
}
.question-add-body-content-question-div .el-icon-remove-outline {
  color: red;
  font-weight: bold;
  position: absolute;
  right: 1px;
  top: 16px;
}
.question-add-body-content-question .title {
  width: 395px;
  margin-left: 20px;
  /* margin-bottom: 20px; */
  border: 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
  font-size: 15px;
  font-weight: normal;
}
.question-add-body-content-question .content {
  width: 395px;
  margin-left: 20px;
  overflow: auto;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
}
</style>
